<template>
	<w-container >
		<w-navbar id="lottery_nav" bgColor="#fff" title="中奖记录"></w-navbar>
		<view class="conent">
			<view class="card bg-color-item">
				<view class="title mb-16">
					<!-- <image :src="$ossUrl + '/static/cj/19.png'"></image> -->
					<!-- <w-image src="/static/icon/cpms-left.png" width="20" height="13"></w-image> -->
					<!-- <text class="font-color-textPrimary">{{handleLang('中奖记录')}}</text> -->
					<!-- <image :src="$ossUrl + '/static/cj/20.png'"></image> -->
					<!-- <w-image src="/static/icon/cpms-right.png" width="20" height="13"></w-image> -->
					
					<!-- <w-big-title :title="handleLang('中奖记录')"></w-big-title> -->
				</view>
				<view class="winning_item" v-for="(item,idx) in prizeRecord" :key="idx">
					<w-image :src="item.image" width="62" height="62"></w-image>
					<view class="right">
						<text>{{ item.num }}</text>
						<text class="text-overflow font-color-textPrimary">{{ handleLang(item.name) }}</text>
					</view>
				</view>
				<w-loading type="nomore" loadingText="暂无中奖记录" class="ptb-10" v-if="prizeRecord.length==0"></w-loading>
			</view>
			<view class="card bg-color-item">
				<view class="title mb-16" sty>
					<!-- <view class="font-color-textPrimary">{{handleLang('抽奖记录')}}</view>
					<w-image src="/static/icon/cpms-right.png" width="20" height="13"></w-image> -->
					
					<!-- <w-big-title :title="handleLang('抽奖记录')"></w-big-title> -->
				</view>
				<view class="raffle_item">
						<!-- <view class="t2">
							<text>{{handleLang('抽奖结果')}}</text>
							<text>{{handleLang('抽奖时间')}}</text>
						</view> -->
					<view v-for="(item, index) in raffleRecord" :class="{'itemAction': index%2==0,'itemInAction':index%2 != 0}"
							:key="index">
						<view class="item flex" >
							<w-image :src="item.image" width="36" height="36" radius="4"></w-image>
							<view class=" flex flex-dir-col ml-13">
								<view class="font-color-black">{{ handleLang(item.lottery_lv) }}</view>
								<text class="font-color-666">{{ $u.timeFormat(item.create_time, 'mm.dd hh:MM:ss') }}</text>
							</view>
						</view>
						<u-line margin="24rpx 0"></u-line>
					</view>
					<w-loading :type="loading" :loadingText="loadingText" emptyType="search" class="ptb-10"
						emptyTop="100"></w-loading>
				</view>
			</view>
		</view>
	</w-container>
</template>

<script>
	import {
		lotteryStatistics,
		lotteryRecord
	} from '@/api/lottery/index.js';
	export default {
		data() {
			return {
				loading: 'none',
				prizeRecord: [], // 中奖记录
				raffleRecord: [], // 抽奖记录
				page: 1,
				isNext: true,
				id: '',
				loadingText: '已经到底了~'
			};
		},
		onLoad({
			id
		}) {
			this.id = id;
			this.init();
		},
		methods: {
			// 初始化
			init() {
				this.getPrizeRecord();
				this.getRaffleRecord();
			},

			// 获取中奖记录
			getPrizeRecord() {
				lotteryStatistics({
					lottery_id: this.id
				}).then(res => {
					this.prizeRecord = res.data;
				}).catch(() => {})
			},

			// 获取抽奖记录
			getRaffleRecord() {
				this.loading = 'loading'
				lotteryRecord({
					type: 10,
					lottery_id: this.id,
					page: this.page
				}).then(res => {
					let {
						data,
						last_page
					} = res.data;
					this.raffleRecord = [...this.raffleRecord, ...data];
					if (this.page < last_page) {
						this.page++;
						this.loading = 'none';
					} else {
						this.isNext = false;
						this.loading = 'nomore';
					}!data.length && (this.loadingText = '暂无抽奖记录');
				}).catch(() => {})
			},

			// 上拉置底
			// scrolltolower() {
			// 	if(this.isNext) this.getRaffleRecord()
			// }
		},
		// 上拉置底
		onReachBottom() {
			if (this.isNext) this.getRaffleRecord()
		}
	}
</script>
<style>
	page {
		background: #F7F7F7;
	}
</style>
<style lang="scss">
	#page {
		// background-image: url($IMG_URL + "/static/bg/zj-record.png");
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-color: $main-bg-color;

		#lottery_nav /deep/ .u-navbar--fixed {
			// background-image: url($IMG_URL +"/static/bg/zj-record.png");
			background-position: top;
			background-size: 100% auto;
			background-color: $main-bg-color;
		}
	}

	.conent {
		padding: 32rpx;

		>.card {
			width: 100%;
			padding: 13rpx;
			border-radius: 22rpx;
			margin-bottom: 32rpx;

			>.title {
				width: 100%;
				@extend .flex-center;

				>text {
					font-size: 34rpx;
					// font-weight: bold;
					margin: 0 32rpx;
				}

				>image {
					width: 46rpx;
					height: 12rpx;
				}
			}
		}
	}

	.winning_item {
		width: 100%;
		height: 150rpx;
		// background: linear-gradient( 47deg, #FFF0F0 0%, #FFF3F3 48%, #FFF9F9 100%);
		background: #F8F8F8;
		border-radius: 16rpx;
		margin-bottom: 16rpx;
		padding-left: 40rpx;
		// border: 1rpx solid #ECECEC;
		@extend .flex-center-sb;

		>.right {
			width: calc(100% - 124rpx);
			@extend .flex, .flex-dir-col, .flex-ai-center, .flex-js-center;

			>text {
				font-size: 28rpx;
				color:#B3B3B3;

				&:first-child {
					font-size: 40rpx;
					font-weight: 600;
					color: $theme-color;
					// background: linear-gradient(180deg, #DF0007 9%, #FFF9E9 100%);
					// -webkit-background-clip: text;
					// -webkit-text-fill-color: transparent;
				}
			}
		}
	}

	.raffle_item {
		width: 100%;
		// background-color: #222;
		border-radius: 20rpx;
		overflow: hidden;

		>.t2 {
			width: 100%;
			height: 96rpx;
			background-color: #222222;
			@extend .flex-center-sb, .plr-16;

			>text {
				@extend .font-size-14;
				color: #fff;
			}
		}

		.item {
			width: 100%;
			height: 96rpx;
			padding: 0 32rpx;
			// @extend .flex-center-sb;

			>.right {
				width: calc(100% - 92rpx);
				@extend .flex-center-sb;

				>view {
					width: 50%;
					@extend .font-size-14, .font-color-999, .font-w-600, .text-overflow;
				}

				>text {
					@extend .font-size-14, .font-color-999, .font-w-600;
				}
			}
		}

		.itemAction {
			// background-color: #F6F6FA;
			// border-top: 2rpx solid #FFC0C0;
			// border-bottom: 2rpx solid #FFC0C0;
		}
		.itemInAction {
			// background-color: #fff;
		}
	}
</style>